<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cubit</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</head>
<body>
    <div 
    class="d-flex flex-column justify-content-center align-items-center"
    style="height: 100vh;">
        <div
        class="d-flex mb-4">
            <input 
            type="number" 
            class="form-control" 
            id="numberInput" 
            placeholder="enter number...">

            <button 
            class="btn btn-primary btn-lg ms-2"
            onclick="onClick()">
            Cube</button>
        </div>
    
        <p
        id="result">
        Your result will appear here...</p>
    </div>

    <script>
        const input_field = document.getElementById("numberInput");
        const result = document.getElementById("result")

        
        function onClick() {
            let value = input_field.value
            let label = "Enter something!"

            if (value != "") {
                label = `${value}<sup>3</sup> = ${value * value * value}`
                result.classList.add('h1')
            } else {
                result.classList.remove('h1')
            }

            result.innerHTML = label
        }
    </script>
</body>
</html>